<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>华为商城 - 官方旗舰店</title>
    <link rel="stylesheet" href="css/style.css">
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
    <!-- 导航栏 -->
    <header class="header bg-white shadow-md sticky top-0 z-50">
        <div class="container mx-auto px-4 py-3">
            <div class="flex items-center justify-between">
                <div class="logo flex items-center">
                    <img src="logo.svg" alt="华为商城" class="h-8 md:h-10">
                </div>
                
                <!-- 导航菜单 - 桌面版 -->
                <nav class="hidden md:flex items-center space-x-8">
                    <a href="#" class="font-medium text-gray-800 hover:text-blue-600 transition-colors">首页</a>
                    <a href="#" class="font-medium text-gray-800 hover:text-blue-600 transition-colors">手机</a>
                    <a href="#" class="font-medium text-gray-800 hover:text-blue-600 transition-colors">平板</a>
                    <a href="#" class="font-medium text-gray-800 hover:text-blue-600 transition-colors">笔记本</a>
                    <a href="#" class="font-medium text-gray-800 hover:text-blue-600 transition-colors">穿戴</a>
                    <a href="#" class="font-medium text-gray-800 hover:text-blue-600 transition-colors">配件</a>
                </nav>
                
                <!-- 用户操作区 - 移动至最右侧 -->
                <div class="user-actions flex items-center space-x-4">
                    <a href="login.html" class="login-btn text-gray-800 hover:text-blue-600 transition-colors">
                        <i class="fa fa-user mr-1"></i> 登录
                    </a>
                    <a href="register.html" class="register-btn text-gray-800 hover:text-blue-600 transition-colors">
                        <i class="fa fa-user-plus mr-1"></i> 注册
                    </a>
                    <a href="cart.html" class="cart-btn relative text-gray-800 hover:text-blue-600 transition-colors">
                        <i class="fa fa-shopping-cart text-xl"></i>
                        <span class="cart-count absolute -top-2 -right-2 bg-blue-600 text-white text-xs rounded-full w-5 h-5 flex items-center justify-center">0</span>
                    </a>
                    
                    <!-- 移动端菜单按钮 -->
                    <button class="md:hidden menu-toggle text-gray-800">
                        <i class="fa fa-bars text-xl"></i>
                    </button>
                </div>
            </div>
            
            <!-- 移动端菜单 -->
            <div class="md:hidden mobile-menu hidden mt-3 pb-3 border-t border-gray-200">
                <nav class="flex flex-col space-y-3">
                    <a href="#" class="font-medium text-gray-800 hover:text-blue-600 transition-colors">首页</a>
                    <a href="#" class="font-medium text-gray-800 hover:text-blue-600 transition-colors">手机</a>
                    <a href="#" class="font-medium text-gray-800 hover:text-blue-600 transition-colors">平板</a>
                    <a href="#" class="font-medium text-gray-800 hover:text-blue-600 transition-colors">笔记本</a>
                    <a href="#" class="font-medium text-gray-800 hover:text-blue-600 transition-colors">穿戴</a>
                    <a href="#" class="font-medium text-gray-800 hover:text-blue-600 transition-colors">配件</a>
                </nav>
            </div>
        </div>
    </header>

 <!-- 轮播图 -->
<section class="slider bg-gray-100">
    <div class="container mx-auto px-4 py-6">
        <div class="slides relative overflow-hidden rounded-lg shadow-lg h-[400px] md:h-[500px]">
            <!-- 第一张轮播图 -->
            <div class="slide active absolute inset-0">
                <img src="https://picsum.photos/seed/huawei1/1200/600" 
                     alt="华为P60系列" 
                     class="w-full h-full object-cover"
                     onerror="this.src='https://picsum.photos/seed/error/1200/600'; this.alt='图片加载失败'">
            </div>
            
            <!-- 第二张轮播图 -->
            <div class="slide hidden absolute inset-0">
                <img src="https://picsum.photos/seed/huawei2/1200/600" 
                     alt="华为MateBook X Pro" 
                     class="w-full h-full object-cover"
                     onerror="this.src='https://picsum.photos/seed/error/1200/600'; this.alt='图片加载失败'">
            </div>
            
            <!-- 第三张轮播图 -->
            <div class="slide hidden absolute inset-0">
                <img src="https://picsum.photos/seed/huawei3/1200/600" 
                     alt="华为Watch GT 3" 
                     class="w-full h-full object-cover"
                     onerror="this.src='https://picsum.photos/seed/error/1200/600'; this.alt='图片加载失败'">
            </div>
            
            <!-- 轮播控制按钮 -->
            <button class="absolute top-1/2 left-4 transform -translate-y-1/2 bg-white/70 hover:bg-white text-gray-800 w-10 h-10 rounded-full flex items-center justify-center transition-colors z-10">
                <i class="fa fa-chevron-left"></i>
            </button>
            <button class="absolute top-1/2 right-4 transform -translate-y-1/2 bg-white/70 hover:bg-white text-gray-800 w-10 h-10 rounded-full flex items-center justify-center transition-colors z-10">
                <i class="fa fa-chevron-right"></i>
            </button>
        </div>
        
        <!-- 轮播指示器 -->
        <div class="slider-controls flex justify-center mt-4 space-x-2">
            <span class="dot w-3 h-3 rounded-full bg-blue-600"></span>
            <span class="dot w-3 h-3 rounded-full bg-gray-300"></span>
            <span class="dot w-3 h-3 rounded-full bg-gray-300"></span>
        </div>
    </div>
</section>

<!-- JavaScript 初始化代码 -->
<script>
    // 轮播图初始化
    document.addEventListener('DOMContentLoaded', function() {
        const slides = document.querySelectorAll('.slide');
        const dots = document.querySelectorAll('.dot');
        const prevBtn = document.querySelector('.fa-chevron-left').parentElement;
        const nextBtn = document.querySelector('.fa-chevron-right').parentElement;
        let currentSlide = 0;
        
        // 显示当前轮播图
        function showSlide(index) {
            slides.forEach((slide, i) => {
                slide.classList.toggle('hidden', i !== index);
                slide.classList.toggle('active', i === index);
            });
            
            dots.forEach((dot, i) => {
                dot.classList.toggle('bg-blue-600', i === index);
                dot.classList.toggle('bg-gray-300', i !== index);
            });
        }
        
        // 下一张
        function nextSlide() {
            currentSlide = (currentSlide + 1) % slides.length;
            showSlide(currentSlide);
        }
        
        // 上一张
        function prevSlide() {
            currentSlide = (currentSlide - 1 + slides.length) % slides.length;
            showSlide(currentSlide);
        }
        
        // 自动轮播
        let slideInterval = setInterval(nextSlide, 5000);
        
        // 点击控制
        prevBtn.addEventListener('click', () => {
            clearInterval(slideInterval);
            prevSlide();
            slideInterval = setInterval(nextSlide, 5000);
        });
        
        nextBtn.addEventListener('click', () => {
            clearInterval(slideInterval);
            nextSlide();
            slideInterval = setInterval(nextSlide, 5000);
        });
        
        // 点击指示器
        dots.forEach((dot, index) => {
            dot.addEventListener('click', () => {
                clearInterval(slideInterval);
                currentSlide = index;
                showSlide(currentSlide);
                slideInterval = setInterval(nextSlide, 5000);
            });
        });
        
        // 检查图片是否加载成功
        document.querySelectorAll('.slides img').forEach(img => {
            img.addEventListener('error', function() {
                console.error('图片加载失败:', this.src);
                this.src = 'https://picsum.photos/seed/error/1200/600';
                this.alt = '图片加载失败';
            });
        });
    });
</script>

    <!-- 商品展示 -->
    <section class="products py-12">
        <div class="container mx-auto px-4">
            <h2 class="text-2xl md:text-3xl font-bold text-center mb-8">热门商品</h2>
            
            <div class="product-grid grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
                <!-- 商品将通过JS动态加载 -->
            </div>
        </div>
    </section>

    <footer class="footer bg-gray-900 text-white py-8">
        <div class="container mx-auto px-4">
            <div class="text-center">
                <p>© 2025 华为技术有限公司 版权所有</p>
                <div class="mt-4 flex justify-center space-x-4">
                    <a href="#" class="text-gray-400 hover:text-white transition-colors">
                        <i class="fa fa-weibo text-xl"></i>
                    </a>
                    <a href="#" class="text-gray-400 hover:text-white transition-colors">
                        <i class="fa fa-wechat text-xl"></i>
                    </a>
                    <a href="#" class="text-gray-400 hover:text-white transition-colors">
                        <i class="fa fa-twitter text-xl"></i>
                    </a>
                    <a href="#" class="text-gray-400 hover:text-white transition-colors">
                        <i class="fa fa-facebook text-xl"></i>
                    </a>
                </div>
            </div>
        </div>
    </footer>

    <script src="js/main.js"></script>
</body>
</html>
